<template>
    <el-page-header @back="goBack">
    <template #content>
      <span class="text font-600 mr-3"> 新闻详情 </span>
    </template>
  </el-page-header>

  <div class="x">
    <h1>{{ txt.txt }}</h1>
  <img :src="txt.img" alt="">
  <div v-html="txt.content"></div>
  </div>
</template>

<script setup>
import  bus  from "vue3-eventbus";
import { ref } from "@vue/reactivity"
import { useRoute, useRouter } from "vue-router";
import { getNews } from "../api";
import { onBeforeUnmount, onMounted } from "@vue/runtime-core";

let txt=ref({})
let id=useRoute().params.id
let router=useRouter()
async function getTxt(){
  let res=await getNews(id)
  console.log(res);
  txt.value=res.data[0]
} 
getTxt()
const goBack = () => {
  router.go(-1)
}

onMounted(()=>{
  bus.emit("footerShow",false)
})

onBeforeUnmount(()=>{
  bus.emit("footerShow",true)
})
</script>

<style lang="less" scoped>
.text {
  text-align: center;
}

::v-deep .el-page-header__header{
  height: 50px;
  border-bottom: 1px solid #ccc ;
}

.x {
  padding: 5px;
  text-indent: 20px;

  h1 {
    font-size: 18px;
    font-weight: 700;
  }

  img {
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>